$buttonBgColor: #39b9c6;
.ui-toast {
	position: fixed;
    width: 20em;
}
body .ui-toast .ui-toast-message
{
           &.ui-toast-message-info {
                background-color: #7fbcec;
                border: 0 none;
                color: #212121;
                .ui-toast-close-icon {
                    color: #212121;
                }
            }
            &.ui-toast-message-success {
                background-color: $buttonBgColor;
                border: 0 none;
                color: #212121;
                .ui-toast-close-icon {
                    color: #212121;
                }
            }
            &.ui-toast-message-warn {
                background-color: #ffe399;
                border: 0 none;
                color: #212121;
                .ui-toast-close-icon {
                    color: #212121;
                }
            }
            &.ui-toast-message-error {
                background-color: #f8b7bd;
                border: 0 none;
                color: #212121;
                .ui-toast-close-icon {
                    color: #212121;
                }
            }
}
.ui-toast .ui-toast-close-icon{
  color:#ffffff;
  &:hover{
    text-decoration: none;
    background-color: darken($buttonBgColor ,5%)
  }
}
.ui-toast .ui-toast-message {
    position: relative;
	  display: block;
    margin-bottom: .75em;
    overflow: hidden;
}

.ui-toast .ui-toast-message-content {
    padding: .5em 1em;
}

.ui-toast .ui-toast-close-icon {
	position: absolute;
	top: .25em;
	right: .25em;
    cursor: pointer;
    display: inline-block;
}

.ui-toast .ui-toast-summary {
	font-weight: bold;
	padding: 0 0 .5em 0;
	display: block;
}

.ui-toast .ui-toast-icon {
    position: absolute;
    display: inline-block;
    left: .5em;
    top: .25em;
    padding: 0;
    font-size: 2em;
}

.ui-toast .ui-toast-message-text-content {
	padding: 0 0 .25em 0;
    margin-left: 2.5em;
}
/* Positions */
.ui-toast-top-right {
	top: 20px;
	right: 20px;
}

.ui-toast-top-left {
	top: 20px;
	left: 20px;
}

.ui-toast-bottom-right {
	bottom: 20px;
	right: 20px;
}

.ui-toast-bottom-left {
	bottom: 20px;
	right: 20px;
}

.ui-toast-top-center {
	top: 20px;
    left: 50%;
    margin-left: -10em;
}

.ui-toast-bottom-center {
	bottom: 20px;
	left: 50%;
    margin-left: -10em;
}

.ui-toast-center {
	left: 50%;
	top: 50%;
    min-width: 20vw;
    transform: translate(-50%, -50%);
}
